<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useProjectStore } from '@/store/modules/project';
import { getProjectListApi } from '@/service/api/businessApi';
import { useAuthStore } from '@/store/modules/auth';
const projectStore = useProjectStore();
const authStore = useAuthStore();
defineOptions({
    name: 'GlobalLogo'
});
const projectList: any = ref([]);
const getProjectList = () => {
    getProjectListApi({
        pageNo: 1,
        pageSize: 1000,
        orgId: authStore.userInfo?.orgId
    }).then(res => {
        projectList.value = res.data?.data;
    });
};
onMounted(() => {
    getProjectList();
});

interface Props {
    /** Whether to show the title */
    showTitle?: boolean;
}

withDefaults(defineProps<Props>(), {
    showTitle: true
});
</script>

<template>
    <div style="cursor: pointer" class="heh-container w-full flex-center nowrap-hidden">
        <div style="display: flex; align-items: center; flex: 1; justify-content: center">
            <h2 style="text-wrap: wrap" v-show="showTitle" class="pl-8px pr-8px text-center text-14px text-primary font-bold transition duration-300 ease-in-out">
                {{ projectStore.currentProject?.name }}
            </h2>
        </div>
    </div>
</template>

<style scoped>
.heh-container {
    background: #1a2c63;

    .text-primary {
        color: #fff;
    }
}
</style>
